<!-- 封装底部导航 -->
 <template>
	 <view style="height: 140rpx;"></view>
    <view class="tabBar flex flex-center flex-align">
        <view class="tabBar-content flex flex-center flex-align">
            <view class="tabBar-item"  @click="changeTab(item.active)" v-for="(item,index) in list" :key="index" :class="tabActive === item.active ? 'active' : ''">
                <image :src="tabActive === item.active ? item.iconActive : item.icon" mode="widthFix" />
                <text >{{item.text}}</text>
            </view>
        </view>
    </view>
 </template>
<script setup lang="ts">
import {ref } from 'vue'
defineProps({
    tabActive: {
        type: Number,
        default: 0
    }
})
const list = ref([
    {
        icon: '/static/tabbar/home.png',
        iconActive: '/static/tabbar/home_active.png',
        text: '直播',
        path: '/pages/live/live',
        active: 0
    },
    {
        icon: '/static/tabbar/user.png',
        iconActive: '/static/tabbar/user_active.png',
        text: '我的',
        path: '/pages/user/user',
        active: 1
    }
])
const changeTab = (index: number) => {
    if (index === 0) {
        uni.switchTab({
            url: '/pages/index/index'
        })
    }
    if (index === 1) {
        uni.switchTab({
            url: '/pages/user/index'
        })
    }

}

</script>
<style lang="scss" scoped>
.tabBar{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;width: 100%;
    z-index: 999;
    padding: 10px 0 40rpx;
    .tabBar-content{
        background: #fff;padding: 10rpx 20rpx;border-radius: 30rpx;
    }
    .tabBar-item{
        display: flex;width: 150rpx;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .tabBar-item image{
        width: 60rpx;height: 60rpx;
    }
    .tabBar-item text{
        font-size: 12px;
    }
    .tabBar-item.active{
        color: #007AFF;
    }
   
}
  
</style>
